<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 可视化分析淘宝双11</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <link type='text/css' href="css/style.css" rel="stylesheet"/>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
    <!--    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>-->
</head>
<body>
<div class='header'>
    <p>ECharts 可视化分析淘宝双11</p>
</div>
<div class="content">
    <div class="nav">
        <ul>
            <li><a href="index">所有买家各消费行为对比</a></li>
            <li><a href="index1">男女买家交易对比</a></li>
            <li><a href="index2">男女买家各个年龄段交易对比</a></li>
            <li><a href="index3">商品类别交易额对比</a></li>
            <li class="current"><a href="#">各省份的总成交量对比</a></li>
        </ul>
    </div>
    <div class="container" style="width: 70%; height: 100%">
        <div class="title">各省份的总成交量对比</div>
        <div class="show">
            <div class='chart-type'>地图</div>
            <div id="main"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    dataList = []
    //AJAX接收数据主体
    $.ajax({
        type: "GET",
        url: "/province",
        dataType: "json",
        async: false,
        success: function (result) {
            for (var i = 0; i < result.length; i++) {
                dataList.push({id: result[i].id, name: result[i].province, value: result[i].num});
            }
        },
        error: function (errorMsg) {
            alert("获取后台数据失败！");
        }
    });

    var option = {
        title: {
            text: '各省份总成交量对比',
            x: "center",
            textStyle: {
                frontSize: 18,
                color: "red"
            },
        },
        tooltip: {
            triggerOn: "click",
            formatter: function (arg) {
                return "地区： " + arg.name + "<br/>成交量： " + arg.value
            }
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        }, // 提供下载工具
        visualMap: {
            min: 0,
            max: 500,
            left: 5,
            bottom: 5,
            showLabel: !0,
            text: ["高", "低"],
            pieces: [{
                gt: 500,
                label: "> 500人",
                color: "#7f1100"
            }, {
                gte: 300,
                lte: 500,
                label: "200 - 500人",
                color: "#ff5428"
            }, {
                gte: 250,
                lt: 300,
                label: "100 - 200人",
                color: "#ff8c71"
            }, {
                gt: 100,
                lt: 250,
                label: "10 - 100人",
                color: "#ffd768"
            }, {
                gt: 1,
                lt: 100,
                label: "1 - 10人",
                color: "#ffffff"
            }],
            show: !0
        },
        geo: {
            map: "china",
            roam: !1,
            scaleLimit: {
                min: 1,
                max: 2
            },
            zoom: 1.23,
            top: 50,
            left: 130,
            label: {
                normal: {
                    show: !0,
                    fontSize: "14",
                    color: "rgba(0,0,0,0.7)"
                }
            },
            itemStyle: {
                normal: {
                    // shadowBlur: 50,
                    // shadowColor: 'rgba(0, 0, 0, 0.2)',
                    borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                    areaColor: "#f2d5ad",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0
                }
            }
        },
        series: [{
            name: "成交量",
            type: "map",
            geoIndex: 0,
            roam: true, // 是否开启鼠标缩放和平移漫游
            itemStyle: { // 每个区域的样式
                normal: {
                    areaColor: '#EDEDED',
                    borderColor: '#D3D7E1', // 图形的描边颜色
                    borderWidth: 1 //描边线宽
                },
                emphasis: { // 高亮状态
                    label: {
                        show: false // 去除鼠标移到地图上，地图上显示国家名的效果
                    }
                    //areaColor: '#7d7d7d'
                }
            },
            scaleLimit: { // 缩放的极限控制
                min: 1,
                max: 3
            },
            left: 40, // 组件离容器左侧的距离
            top: 80, // 组件离容器上侧的距离
            right: 80,
            //nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
            data: dataList
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
